<template>
  <div class="left-top">
    <div class="headertop">
      <span>公告栏</span>
    </div>
    <el-row class="content">
      <el-col class="content_left">
        <div class="content_left_carous">
          <el-carousel :autoplay="true" indicator-position="none">
            <el-carousel-item v-for="item in picUrlList" :key="item" >
              <img
              @click="open(item)"
                :src=" portalPath+'/r/'+item.slice(1)"
                alt=""
                class="carous_img"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <div class="content_center"></div>
      <el-col class="content_right">
        <ul>
          <li
            v-for="(item, index) in messageList"
            :key="index"
            @mouseenter="hoverIndex = index" 
            @mouseleave="hoverIndex = -1"
          
            :class="{ hovered: hoverIndex === index }"
          >
            <span
              :style="{
                width: '6px',
                height: '6px',
                background: item.isNew ? '#E85245' : '#BBBBBB',
                borderRadius: '3px',
                display: 'inline-block',
                marginRight: '8px',
              }"
            ></span>
            <div class="titles-wrapper">
              <span class="titles" @click="toopen(item)">{{ item.title }}

                <img
                v-if="isNewItem(item.createTimeExtDataTime)"
                src="../../assets/img/new.png"
                alt="New"
                class="new-icon"
              />
              </span>
              
            </div>
         
            <span class="date">{{ item.createTime }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="bottom" >
       <span @click="mored">更多 ></span> 
    </div>
  </div>
</template>



<script>

import { getNavbar } from "@/api/index";
import dayjs from 'dayjs';
export default {
  name: "LeftTop",
  data() {
    return {
      messageList:[],
      portalPath:window.portalPath,
      hoverIndex: -1,
      picUrlList:[],
      items: [
        { title: "优先级 1 - 系统更新", isNew: true, date: "2024-10-21" },
        { title: "优先级 2 - 服务器维护", isNew: false, date: "2024-10-20" },
        { title: "优先级 3 - 数据备份", isNew: true, date: "2024-10-19" },
        { title: "优先级 4 - 用户反馈总结", isNew: false, date: "2024-10-18" },
        { title: "优先级 5 - 新功能发布", isNew: true, date: "2024-10-17" },
        { title: "优先级 6 - 安全补丁更新", isNew: false, date: "2024-10-16" },
        { title: "优先级 7 - 性能优化计划", isNew: true, date: "2024-10-15" },
        {
          title: "优先级 8 - 开发者大会安排",
          isNew: false,
          date: "2024-10-14",
        },
        { title: "优先级 9 - 移动端适配测试", isNew: true, date: "2024-10-13" },
        { title: "优先级 10 - 客户培训会", isNew: false, date: "2024-10-12" },
      ],
    };
  },
  mounted() {
   
    this.getlistbox()
  },
  methods: {
    isNewItem(createTime) {
    // 当前日期
    const now = dayjs();

    // 将传入的 createTime 转为 dayjs 对象
    const itemDate = dayjs(createTime);

    // 计算当前日期与传入日期的差距，单位为天
    const daysDifference = now.diff(itemDate, 'day'); // 'day' 表示按天比较

    // 如果差距小于或等于7天，则返回 true
    return daysDifference <= 7;
  },
  open(item) {

      // 定义一个正则表达式来匹配 `messageId` 参数
      const regex = /[?&]messageId=([^&]*)/;
      const match = item.match(regex); // 使用 match 来匹配正则表达式

      if (match) {
        const messageId = match[1]; // match[1] 是捕获的 messageId 值
   
        window.open(
           portalPath+ "/r/w?sid=" +
            window.sid +
            "&cmd=com.actionsoft.apps.cms_get_message&messageId=" +
            messageId,
          "_blank"
        );
      } else {
      }
    },
    toopen(item){
      window.open( portalPath+ "/r/w?sid="+window.sid+"&cmd=com.actionsoft.apps.cms_get_message&messageId=" + item.id, "_blank");
    },
    mored(){
      window.open( portalPath+ "/r/w?sid="+window.sid+"&cmd=com.actionsoft.apps.cms_site&siteid=635782b9-9acc-4bd1-9c1f-760774874e49", "_blank");
    },
       //获取数据列表
       getlistbox() {
   
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getCmsMoudleInfo",
        currentPage:"1",
        pageSize:"10",
    
    
      };
      getNavbar(param).then((res) => {
    
        const { result, msg, data, id } = res;
        this.messageList=res.data.messageList;
        this.picUrlList=res.data.picture;
  
        // this.shortCuts = res.data.shortCuts;
      });
    },
      //查询
    //   getlist() {
    //   var param = {
    //     sid: window.sid,
    //     cmd: "com.bono.portal.getViewpager",
    //     moduleId:'89f882f7-ae01-4430-b54d-e504246bf0e1'
    //   };
    //   getNavbar(param).then((res) => {
    //     console.log("瞅瞅我自己调了啥1", res);
    //     const { result, msg, data, id } = res;
    //     this.picUrlList=res.data.picUrlList;
      
    //   });
    // },
  }
};
</script>

<style scoped>
.titles-wrapper {
  display: flex;
  align-items: center;  /* Align items (text and image) horizontally */
  width: 80%;  /* Limit the width of the titles wrapper */
  overflow: hidden;  /* Hide overflowing content (i.e., the title text) */
}
.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  display: inline-block; /* 使用 inline-block 保证内容在一行显示 */
  color: #333333;
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 仅隐藏溢出的文本，不影响图片 */
  position: relative; /* 让图片可以相对于标题定位 */
  padding-right: 45px; /* 留出位置给图片 */
}
.titles  img {
  position: absolute;
  right: 3px;
  top: 6px;


}
.content_right ul {
  list-style-type: none; /* 去掉列表项的默认样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}

.content_right li {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右对齐 */


  transition: color 0.3s; /* 添加过渡效果 */
}

.hovered  .titles{
  color: #1e4398; /* 鼠标悬停时标题颜色 */
    cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headertop {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
  padding-bottom: 15px;
  padding: 20px;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headertop span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */

  margin: 0 20px;
      height: calc(100% - 120px);
    
}

/* 隐藏滚动条 - 适用于 Chrome 和 Safari */

.content_left {
  padding-right: 10px; /* 左侧内容与右侧内容之间的间距 */
  width: 39%;
  height: 100%;
    overflow-y: hidden;
}
.content_center {
  flex: 0 0 1%;
}

.content_right {
  display: flex;
  flex-direction: column; /* 列表垂直排列 */
  width: 60%;
  /* height: calc(100% - 200px); */
  /* overflow-y: scroll; */
  /* height: 150px; */
  overflow-y: scroll;
  height: 100%
}
.content_right {
  flex: 1;
}
/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.content_right::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.content_right {
  scrollbar-width: none; /* 隐藏滚动条 */
}

.content_right ul {
  list-style-type: none; /* 去掉列表项的默认样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}

.content_right li {
   
    line-height: 30px;
}
.bottom{
    font-family: PingFang SC;
    font-weight: 700;
    font-size: 14px;
    color: #1E4398;
    text-align: right;
   
    margin: 15px 20px 0 20px;

}
.bottom span{
  cursor: pointer;

}
/deep/.el-carousel__button{
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
}
/deep/ .el-carousel__indicators--horizontal{
  left: 80% !important;
}  
/deep/ .el-carousel--horizontal{
  height: 100%;
}
</style>
